<!-- Modal -->
<a data-toggle="modal" ng-if="showLink" data-target="#dlg-portal-theme-settings" class="btn-link">
    Show Settings
</a>
<div class="modal fade" id="dlg-portal-theme-settings" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Theme Settings</h3>
            </div>
            <div class="modal-body">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="form-group">
                            <label class="customRange">Primary Color Hue</label>
                            <!-- <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorHue}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorHue"> -->
                            <input type="range" min="0" max="360" step="1" class="custom-range" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorHue| number: 0}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorHue" />
                        </div>
                        <div class="form-group">
                            <label class="">Primary Color Saturation</label>
                            <!-- <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorSaturation}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorSaturation"> -->
                            <input type="range" min="0" max="100" value="100%" step="1" class="custom-range" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorSaturation| number: 0}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorSaturation" />
                        </div>
                        <div class="form-group">
                            <label class="">Primary Color Brightness</label>
                            <!-- <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorBrightness}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorBrightness"> -->
                            <input type="range" min="0" max="100" value="50" step="1" class="custom-range" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorBrightness}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorBrightness" />
                        </div>
                        <div class="form-group">
                            <label class="col-4">Background Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.bgColor}}"
                                ng-model="$ctrl.portalThemeSettings.bgColor">
                            <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.bgColor" />
                        </div>
                        <div class="form-group">
                            <label class="col-4">Text Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.textColor}}"
                                ng-model="$ctrl.portalThemeSettings.textColor">
                            <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.textColor" />
                        </div>
                        <!-- <div class="form-group">
                            <label class="col-4">Background Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.bgColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.bgColorHover">
                            <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.bgColorHover"/>
                        </div>                        
                        <div class="form-group">
                            <label class="col-4">Border Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.borderColor}}"
                                ng-model="$ctrl.portalThemeSettings.borderColor">
                            <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.borderColor"/>
                        </div>                        
                        <div class="form-group">
                            <label class="col-4">Border Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.borderColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.borderColorHover">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.borderColorHover"/>
                        </div>                        
                        <div class="form-group">
                            <label class="col-4">Text Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.textColor}}"
                                ng-model="$ctrl.portalThemeSettings.textColor">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.textColor"/>
                        </div>                        
                        <div class="form-group">
                            <label class="col-4">Text Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.textColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.textColorHover">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.textColorHover"/>
                        </div>                        
                        <div class="form-group">
                            <label class="col-4">Link Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.linkColor}}"
                                ng-model="$ctrl.portalThemeSettings.linkColor">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.linkColor"/>
                        </div>                        
                        <div class="form-group">
                            <label class="col-4">Link Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.linkColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.linkColorHover">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.linkColorHover"/>
                        </div>                         -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="$ctrl.saveThemeSettings()" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>